<template>
  <div class="container">
    <div class="inner-container">
      <div :class="{'item':true,'item-margin':index>2}" v-for="(item, index) in data" :key="item.id">
        <img :src="item.img" :class="{'item-img': true, 'mid-item': index === 1 || index === 4}" />
        <span class="item-title">{{item.title}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'home-grid',
  props: {
    data: Array
  }
}
</script>

<style lang="scss" scoped>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 3.9rem;
  // background-color: green;
  // margin-top: ;

  .inner-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 5.4rem;
    // height: 3.6rem;
    // background-color: red;
    .item-margin{
      margin-top: 0.77rem;
    }
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;

      .item-img {
        width: .75rem;
        height: .75rem;
      }
      .item-title{
        margin-top: .2rem;
      }

      .mid-item {
        margin: 0 1.57rem;
      }
    }
  }
}
</style>
